<template>
	<view class="pages">
		<view class="all_view" :style="{height:((navId == 2||navId == 3||navList.length==0||quoteList.length == 0)?'100vh':'')}">
			<h-nav-bar-yun title="问诊设置" :fixed="true" @clickLeft="toBack"></h-nav-bar-yun>
			<view class="nav" :style="{ top: statusHeight + 44 + 'px' }" v-if="navList.length>1">
				<view v-show="navList.length>1" class="nav_l" v-for="(item, index) in navList" :key="index" @click="bindNav(item?.id,item)" :style="{width:(100/navList.length+'%')}">
					<view class="nav_l_t" :style="{ color: navId == item?.id ? '#202020' : '#5C5C5C' }">{{ item?.name }}
					</view>
					<view class="nav_l_x" v-show="navId == item?.id"></view>
				</view>
			</view>
			<view class="title" v-show="navList.length==1">{{navName}}</view>
			<view class="section" :style="{flex:((navId == 2||navId == 3||navList.length==0||quoteList.length == 0)?'1':'')}" v-show="navList.length>0">
				<view class="sec_on clear" v-for="(item,index) in navList" :key="index" v-show="navId==item.id">
					<image class="sec_on_img left" src="@/static/index/jd.png"></image>
					<view class="sec_on_cen left">
						<view class="sec_on_cen_t">接单开关</view>
						<view class="sec_on_cen_b" v-if="!item.isYcOpen">开启后，患者可以向您发起咨询</view>
						<view class="sec_on_cen_b" v-if="item.isYcOpen">已开启，患者可以向您发起咨询</view>
					</view>
					<view class="sec_on_r right flex_cen">
						<up-switch v-model="item.isYcOpen" activeColor="#00C1B9" size="25" inactiveColor="#F5F6F8" @change="changeYcSet"></up-switch>
					</view>
				</view>
				<view class="sec_off" :style="{flex:((navId == 2||navId == 3||navList.length==0||quoteList.length == 0)?'1':'')}">
					<view class="sec_off_title flex">
						<view v-show="navId==1">孕产跟踪价格设置</view>
						<view v-show="navId==2">问诊价格设置（元/次）</view>
						<view v-show="navId==3">儿科跟踪价格设置</view>
						<image src="@/static/index/ycp.png" v-show="saveNum!=2&&(navId==1||navId==3)&&quoteList.length>0" @click="toSetPrice"></image>
						<image src="@/static/index/ycpa.png" v-show="saveNum==2&&(navId==1||navId==3)&&quoteList.length>0"></image>
					</view>
					<view class="sec_off_list" v-show="quoteList.length > 0&&navId==1&&!loading">
						<view class="sec_off_list_top">
							<view class="sec_off_list_head">
								<view class="sec_off_list_head_l sec_off_list_head_la">服务项目</view>
								<view class="sec_off_list_head_l sec_off_list_head_lb">服务周期</view>
								<view class="sec_off_list_head_l sec_off_list_head_lc">价格</view>
							</view>
						</view>
						<view class="sec_off_list_pp">
							<view class="sec_off_list_foot">
								<view class="sec_off_list_foot_list" v-for="(item, index) in quoteList" :key="index" :style="{ color: getPrice(item?.totalPrice) == 0 ? '#00C1B9' : '#333' }">
									<view class="sec_off_list_foot_list_l sec_off_list_foot_list_la">{{ item?.serviceName }}</view>
									<view class="sec_off_list_foot_list_l sec_off_list_foot_list_lb">{{ item?.serviceWeek }}</view>
									<view class="sec_off_list_foot_list_l sec_off_list_foot_list_lc">{{getPrice(item?.totalPrice)?(getPrice(item?.totalPrice)+'元'):'免费'}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="sec_off_list" v-show="quoteList.length > 0&&navId==2&&!loading">
						<view class="sec_off_list_man flex" v-for="(item, index) in quoteList" :key="index">
							<view class="sec_off_list_man_l flex">
								<image src="@/static/index/xiao.png" class="sec_off_list_man_icon"></image>
								<view class="sec_off_list_man_text">{{item?.desc}}</view>
							</view>
							<view class="sec_off_list_man_r flex">
								<view class="sec_off_list_man_price" :style="{ color:(item?.unit_price? '#333' : '#00C1B9') }">{{item?.unit_price||"未设置"}}</view>
								<image class="sec_off_list_man_img" src="@/static/index/ycp.png" v-show="saveNum!=2" @click="toSetPrice"></image>
								<image class="sec_off_list_man_img" src="@/static/index/ycpa.png" v-show="saveNum==2"></image>
							</view>
						</view>
					</view>
					<view class="sec_off_list" v-show="quoteList.length > 0&&navId==3&&!loading">
						<view class="sec_off_list_top">
							<view class="sec_off_list_head">
								<view class="sec_off_list_head_l sec_off_list_head_la">服务项目</view>
								<view class="sec_off_list_head_l sec_off_list_head_lb">服务时长</view>
								<view class="sec_off_list_head_l sec_off_list_head_lc">价格（元）</view>
							</view>
						</view>
						<view class="sec_off_list_pp">
							<view class="sec_off_list_foot">
								<view class="sec_off_list_foot_list" v-for="(item, index) in quoteList" :key="index" :style="{ color: getPrice(item?.service_total_price) == 0 ? '#00C1B9' : '#333' }">
									<view class="sec_off_list_foot_list_l sec_off_list_foot_list_la">{{ item?.serviceName }}</view>
									<view class="sec_off_list_foot_list_l sec_off_list_foot_list_lb">{{ item?.serviceWeek }}</view>
									<view class="sec_off_list_foot_list_l sec_off_list_foot_list_lc">{{getPrice(item?.service_total_price)?(getPrice(item?.service_total_price)+'元'):'免费'}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="sec_off_none flex_cen" v-show="quoteList.length == 0&&!loading">
						<view>
							<image class="sec_off_none_img" src="@/static/index/inone.png"></image>
							<view class="sec_off_none_text">暂无内容</view>
							<view class="sec_off_none_btn" @click="toSetPrice">去设置</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sec_none flex_cen" style="flex:1" v-show="navList.length == 0">
				<view>
					<image class="sec_none_img" src="@/static/images/nones.png"></image>
					<view class="sec_none_text">暂未开通服务</view>
					<view class="sec_none_btn" @click="navigateTo('/pages-users/business-management/index')">去开通</view>
				</view>
			</view>
			
			<view class="bototom_box">
				<view class="sec_ti" v-if="!loading">
					<image src="@/static/index/tishi.png"></image>{{navName}}价格一年只能修改2次，请谨慎操作
				</view>
				<h-line :height="112+bottoms"></h-line>
			</view>
			<view class="foot">
				<view class="foot_btn" :class="(saveNum==2||getType(navId)==1)?'foot_btn_dis':''" @click="submit(navId)">保存</view>
				<h-line :height="bottoms"></h-line>
			</view>
		</view>
		<h-modal :show="saveShow" titlea="修改内容未保存" leftBtn="直接离开" rightBtn="保存后离开" @clear="navigateBack()" @bind="savePrice(navId)"></h-modal>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, nextTick } from 'vue'
	import { formatDate } from '@/utils/utils'
	import { switchReceive } from '@/api/home'
	import { getDoctorQuote,getDoctorTransaction,getDoctorQuoteSet,getDoctorQuoteSingleSwitch,getConsultationSwitch,getManServiceList,getSaveConsultationQuote,childrenServiceSave,childrenServiceDetails,childrenServiceList } from '@/api/business'
	import { navigateTo, showToast, navigateBack, redirectTo } from '@/utils'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onReady,
		onShow,
		onPageScroll,
		onUnload,
		onHide,
		onBackPress,
	} from '@dcloudio/uni-app'
	import { uploadApi } from '@/utils/upLoad'
	import { useMemberStore } from '@/stores'
	const login = ref(null) // 登录组件实例
	const store = useMemberStore()
	var token = store?.token
	const navList = ref([])
	const navId = ref(0)
	const statusHeight = ref(0)
	const isYcOpen = ref(false)
	const priceList = ref([])
	const quoteList = ref([])
	const imgTextList = ref([])
	const priceSet=ref(1)
	const saveShow=ref(false)
	const saveNum=ref(0)
	const ifShow=ref(false)
	var props = defineProps({
		setType: String,
	})
	const navName=ref("")
	const bottoms=ref(0)
	onLoad((o) => {
		getBusiness()
	})
	onShow(() => {
		if(uni.getStorageSync('priceSet')){
			priceSet.value=2
			const list=navList.value;
			for(var i in list){
				if(navId.value==list[i].id){
					list[i].showType=2
				}
			}
			navList.value=list
		}
		uni.removeStorageSync('priceSet')
		const id=uni.getStorageSync('priceSetId')
		if(id==1){
			getQuoteList()
		}else if(id==2){
			getMan()
		}else if(id==3){
			getErList()
		}
		uni.removeStorageSync('priceSetId')
	})
	onReady(() => {
		uni.getSystemInfo({
			success: (e) => {
				statusHeight.value = e.statusBarHeight
				bottoms.value = e.safeAreaInsets.bottom*2
			},
		})
	})
	function toBack(){
		var list=navList.value;
		for(var i in list){
			if(list[i].showType==2){
				saveShow.value=true
				return false;
			}
		}
		navigateBack()
	}
	async function getBusiness() {
		const res = await getDoctorTransaction()
		var list=res.data;
		var arr=[]
		for(var i in list){
			list[i].showType=1
			if(list[i].is_open==1){
				list[i].isYcOpen=true
			}else{
				list[i].isYcOpen=false
			}
			if(list[i].user_has_business==1){
				arr.push(list[i])
			}
		}
		if(arr.length>0){
			navName.value=arr[0].name
			navId.value=arr[0].id
			getNewWen(arr[0].id,arr[0])
			navList.value = arr
		}
	}
	function getType(id){
		var list=navList.value;
		for(var i in list){
			if(list[i].id==id){
				return list[i].showType
			}
		}
	}
	function getNewWen(id,row){
		if(id==1){
			getQuoteList()
			if(row.is_open==1){
				isYcOpen.value=true
			}else{
				isYcOpen.value=false
			}
		}else if(id==2){
			if(row.is_open==1){
				isYcOpen.value=true
			}else{
				isYcOpen.value=false
			}
			getMan()
		}else if(id==3){
			if(row.is_open==1){
				isYcOpen.value=true
			}else{
				isYcOpen.value=false
			}
			getErList()
		}else if(id==4){
			getImgTextList()
		}
	}
	const loading=ref(true)
	async function getMan() {
		loading.value=true
		const res=await getManServiceList({
			type:getType(2)||1
		})
		loading.value=false
		quoteList.value=res?.data?.data?.data?.quoteList||[]
		saveNum.value=res?.data?.data?.data?.save_service_num||0
	}
	async function getQuoteList() {
		loading.value=true
		const res=await getDoctorQuote({
			type:getType(1)||1
		})
		loading.value=false
		quoteList.value=res?.data?.quoteList||[]
		saveNum.value=res?.data?.save_service_num||0
	}
	async function getErList() {
		loading.value=true
		const res=await childrenServiceList({
			type:getType(3)||1
		})
		loading.value=false
		quoteList.value=res.data.list||[]
		saveNum.value=res?.data?.save_service_num||0
	}
	async function getImgTextList() {
		imgTextList.value = []
	}
	async function changeYcSet(e) {
		const res = await getDoctorQuoteSingleSwitch({
			type: e ? 1 : 0,
			transaction_id:navId.value
		})
		if(res.code == 200) {
			const list=navList.value;
			console.log(list)
			for(var i in list){
				if(navId.value==list[i].id){
					list[i].isYcOpen=e
				}
			}
			navList.value=list
		} else {
			ifShow.value=true
			const list=navList.value;
			for(var i in list){
				if(navId.value==list[i].id){
					list[i].isYcOpen=false
				}
			}
			navList.value=list
		}
		showToast(res.message)
	}
	function toSetPrice(){
		if(navId.value==1){
			navigateTo('/pages-users/inquiry/priceSet')
		}else if(navId.value==2){
			navigateTo('/pages-users/inquiry/manSet')
		}else if(navId.value==3){
			navigateTo('/pages-users/inquiry/pediatricSet')
		}
	}
	function bindNav(id,item) {
		getNewWen(id,item)
		navId.value = id
		navName.value=item.name
	}
	function changeList(id){
		const list=navList.value;
		for(var i in list){
			if(id==list[i].id){
				list[i].showType=1
			}
		}
		navList.value=list
	}
	async function submit(id) {
		if(id==1){
			if(saveNum.value==2){
				return false
			}
			if(getType(1)==1){
				return false
			}
			const res=await getDoctorQuoteSet()
			if(res.code==200){
				changeList(id)
				showToast('保存成功')
				nextTick(() => {
					getQuoteList()
				})
			}else{
				showToast(res.msg)
			}
		}else if(id==2){
			if(saveNum.value==2){
				return false
			}
			if(getType(2)==1){
				return false
			}
			const res=await getSaveConsultationQuote()
			if(res.code==200){
				changeList(id)
				showToast('保存成功')
				nextTick(() => {
					getMan()
				})
			}else{
				showToast(res.msg)
			}
		}else if(id==3){
			if(saveNum.value==2){
				return false
			}
			if(getType(3)==1){
				return false
			}
			const res=await childrenServiceSave()
			if(res.code==200){
				changeList(id)
				showToast('保存成功')
				nextTick(() => {
					getErList()
				})
			}else{
				showToast(res.msg)
			}
		}
	}
	async function savePrice(id){
		var list=navList.value;
		for(var i in list){
			if(list[i].showType==2){
				submit(list[i].id)
			}
		}
		navigateBack()
	}

	function getPrice(num) {
		num = Number(num).toFixed(2)
		num = num.toString()
		num = Number(num)
		return num
	}
</script>

<style>
	page {
		background: #f5f6f8;
	}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.flex_cen {
		display: flex;
		flex-direction: row;
		/* 子元素横向排列 */
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: center;
	}

	.clear:after {
		/*START 真正起到清除浮动的代码*/
		content: '';
		display: block;
		clear: both;
		/*END 真正起到清除浮动的代码*/
		height: 0;
	}

	.clear {
		display: inline-block;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}
	.all_view{
		display: flex; flex-direction: column;
	}
	.nav {
		width: 750rpx;
		background: #fff;
		border-radius: 14rpx;
		position: sticky;
		left: 24rpx;
		z-index: 9999;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.nav_l {
			height: 88rpx;
			text-align: center;
			.nav_l_t {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #202020;
				line-height: 42rpx;
				padding-top: 23rpx;
			}
			.nav_l_x {
				width: 40rpx;
				height: 6rpx;
				background: #00c1b9;
				border-radius: 5rpx;
				margin: 5rpx auto;
			}
		}
	}
	.title{
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #202020;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		padding: 20rpx 0 0 24rpx;
	}
	.sec_none{
		width: 100%;
		height: 80vh;
		border-radius: 20rpx;
		text-align: center;
		.sec_none_img {
			width: 250rpx;
			height: 200rpx;
		}
		.sec_none_text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #aaaaaa;
			line-height: 37rpx;
			margin-top: 20rpx;
		}
		.sec_none_btn {
			width: 360rpx;
			height: 88rpx;
			background: #00c1b9;
			border-radius: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			margin-top: 30rpx;
		}
	}

	.section {
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		.sec_on {
			width: 702rpx;
			height: 142rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin: 20rpx 0;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.sec_on_img {
				width: 60rpx;
				height: 60rpx;
				background: #f5f6f8;
				border-radius: 50%;
				margin-top: 10rpx;
				box-sizing: border-box;
				padding: 15rpx;
			}
			.sec_on_cen {
				margin-left: 15rpx;
				.sec_on_cen_t {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #202020;
					line-height: 36rpx;
				}
				.sec_on_cen_b {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #5c5c5c;
					padding-top: 10rpx;
					line-height: 36rpx;
				}
			}
			.sec_on_r {
				height: 100%;
			}
		}
		.sec_off {
			width: 702rpx;
			background: #ffffff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			.sec_off_title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #202020;
				line-height: 82rpx;
				image {
					width: 50rpx;
					height: 82rpx;
					box-sizing: border-box;
					padding: 26rpx 0 26rpx 20rpx;
				}
			}
			.sec_off_none {
				width: 702rpx;
				height: 802rpx;
				text-align: center;
				height: 800rpx;
				.sec_off_none_img {
					width: 250rpx;
					height: 200rpx;
				}
				.sec_off_none_text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #aaaaaa;
					line-height: 37rpx;
					margin-top: 20rpx;
				}
				.sec_off_none_btn {
					width: 360rpx;
					height: 88rpx;
					background: #00c1b9;
					border-radius: 48rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 88rpx;
					text-align: center;
					font-style: normal;
					margin-top: 30rpx;
				}
			}
			.sec_off_list {
				min-height: 50vh;
				.sec_off_list_man {
					padding: 30rpx 0;
					.sec_off_list_man_l {
						.sec_off_list_man_icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
						.sec_off_list_man_text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #202020;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
					.sec_off_list_man_r {
						.sec_off_list_man_price {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #AAAAAA;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
						.sec_off_list_man_img {
							width: 28rpx;
							height: 28rpx;
							margin-left: 10rpx;
						}
					}
				}
				.sec_off_list_top {
					position: sticky;
					left: 0;
					width: 100%;
					.sec_off_list_head {
						overflow: hidden;
						width: 662rpx;
						height: 85rpx;
						background:#F1F1F1;
						margin: 0 auto;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						box-sizing: border-box;
						border: 1rpx solid #5C5C5C;
						.sec_off_list_head_l {
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #333333;
							line-height: 30rpx;
							text-align: center;
							padding: 31rpx 0 22rpx;
							float: left;
						}
						.sec_off_list_head_la {
							width: 238rpx;
						}
						.sec_off_list_head_lb {
							width: 248rpx;
							border-left: 1rpx solid #5C5C5C;
						}
						.sec_off_list_head_lc {
							width: 172rpx;
							border-left: 1rpx solid #5C5C5C;
						}
					}
				}
				.sec_off_list_pp {
					width: 662rpx;
					background: #ffffff;
					border-radius: 0 0 18rpx 18rpx;
					box-sizing: border-box;
					margin: 0 auto;
					overflow: hidden;
					.sec_off_list_foot {
						border: 1rpx solid #5C5C5C;
						border-top: none;
						margin-bottom: 30rpx;
						border-radius: 0 0 18rpx 18rpx;
						.sec_off_list_foot_list {
							display: flex;
							flex-wrap: wrap;
							border-top: 1rpx solid #5C5C5C;
							justify-content: space-between;
							.sec_off_list_foot_list_l {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								line-height: 36rpx;
								display: flex;
								padding: 11rpx 15rpx;
								box-sizing: border-box;
								text-align: center;
								flex-direction: row;
								/* 子元素横向排列 */
								justify-content: center;
								/* 相对父元素水平居中 */
								align-items: center;
								text-align: center;
							}
							.sec_off_list_foot_list_la {
								width: 240rpx;
								padding: 28rpx 10rpx;
								box-sizing: border-box;
								border-right: 1rpx solid #5C5C5C;
							}
							.sec_off_list_foot_list_lb {
								width: 240rpx;
								box-sizing: border-box;
								border-right: 1rpx solid #5C5C5C;
							}
							.sec_off_list_foot_list_lc {
								width: 162rpx;
							}
						}
						.sec_off_list_foot_list:first-of-type {
							border-top: none;
						}
					}
				}
			}
		}
	}
		.sec_ti {
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #f5a520;
			line-height: 37rpx;
			padding: 30rpx 0;
			image {
				width: 26rpx;
				height: 26rpx;
				margin: 0 6rpx;
				position: relative;
				top: 4rpx;
			}
		}

	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background: #ffffff;
		.foot_btn {
			width: 702rpx;
			height: 88rpx;
			background: #00c1b9;
			border-radius: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
			margin: 12rpx auto;
		}
		.foot_btn_dis{
			background: #D5D9DF;
		}
	}
</style>
